<!DOCTYPE html>
<html>

<head>
	<title>Test</title>
	<style>
		h1 {
			padding-bottom: 30px;
			border: 1px solid;
		}

		.container {
			overflow: auto;
			height: 800px;
			border: 1px solid red;
		}
	</style>
</head>

<body>
	<button onclick="onTouch()">点击</button>
	<div class="container" id="container">
		<h1>1</h1>
		<h1>2</h1>
		<h1>3</h1>
		<h1>4</h1>
		<h1 >5</h1>
		<h1>6</h1>
		<h1>7</h1>
		<h1>8</h1>
		<h1>9</h1>
		<h1>10</h1>
		<h1>11</h1>
		<h1>12</h1>
		<h1 id="sixteen">13</h1>
		<h1>14</h1>
		<h1>15</h1>
		<h1>16</h1>
		<h1>17</h1>
		<h1>18</h1>
		<h1>19</h1>
		<h1>20</h1>
	</div>

</body>
<script type="text/javascript">
	function onTouch() {
		const container = document.getElementById('container');
		const sixteen = document.getElementById('sixteen')
		console.log(111, sixteen.offsetTop, container.offsetTop)
		// 本案例默认滚动元素是　html ，你可以根据你需要的滚动元素进行设置。
		container.scrollTo({
			top: sixteen.offsetTop - container.offsetTop,
			behavior: 'smooth' // 让滚动更丝滑
		})
	}
</script>

</html>